<template>
  <el-header class="logo-con" style="padding:0px;">
    <!-- <h1 class="logo">{{ appName }} {{ appVersion }}</h1> -->
    <div class="header-content">
      <i class="login-logo"></i>
      <span class="line"></span>
      <span class="login-name">{{ appName }} {{ appVersion }}</span>
    </div>
  </el-header>
</template>

<script>
export default {
  components: {},
  props:["proName"],
  data() {
    return {
      appName: PUZZLE_CONFIG.appName,
      appVersion: PUZZLE_CONFIG.appVersion
    };
  },
  created() {
  },
  methods: {},
  watch:{
    proName:{
      handler:function(val,oldval){
        this.appName = val;
      },
    }
  }

};
</script>

<style lang="less" scoped>
// .logo-con {
//   height: 60px;
//   width: 100%;
//   .logo {
//     color: #fff;
//     font-size: 19px;
//     font-weight: bold;
//     line-height: 60px;
//     padding: 0 20px;
//   }
// }
.el-header {
  position: fixed;
  top: 100px;
  left: 100px;
  .header-content {
    display: flex;
    align-items: center;
    .login-logo {
      display: inline-block;
      width: 54px;
      height: 54px;
      background: url(../../assets/images/login/login_logo.png)no-repeat;
      background-size: cover;
    }
    .line {
      display: inline-block;
      width: 1px;
      background: #fff;
      height: 26px;
      margin: 0 10px;
    }
    .login-name {
      font-size: 24px;
      color: #fff;
      font-weight: bold;
    }
  }
}
</style>
